<template>
  <div class="div-pop apply-result" catchtouchmove="true">
    <div class="result-box">
      <div class="result-icon" :class="'result-' + anchorAuth"
      :style="'background:url(' + fileSpace + '/images/anchor-result-icon.png) no-repeat'"></div>
      <!-- // '申请状态: -1 未申请;  0 待审核;  1 审核通过;  2审核未通过;' -->
      <template v-if="anchorAuth === 0">
        <p>申请成功</p>
        <p>审核通过后成为主播</p>
      </template>
      <template v-if="anchorAuth === 1">
        <p>恭喜你！成为主播</p>
      </template>
      <template v-if="anchorAuth === 2">
        <p>审核未通过</p>     
      </template>
      <div class="result-btn font-16 font-w" @click="goHome">返回首页</div>
    </div>
  </div>
</template>

<script>
  export default {
    components: { },
    data() {
      return {
        isComponents: true
      }
    },
    props: {
      anchorAuth: {
        type: Number,
        default: 0
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    onShow() {
      this.initResult()
    },
    mounted() {
      setTimeout(() => {
        this.initResult()
      }, 100)
    },
    methods: {
      initResult() {
        if (this.anchorAuth === 0) {
          this.$pt.setNavigationBarTitle({
            title: '申请成功'
          })
        } else if (this.anchorAuth === 1) {
          this.$pt.setNavigationBarTitle({
            title: '成为主播'
          })
        } else if (this.anchorAuth === 2) {
          this.$pt.setNavigationBarTitle({
            title: '申请失败'
          })
        }
      },
      goHome() {
        this.$pt.reLaunch({ url: '/pages/home/main' })
      }
    }
  }
</script>

<style lang="less" scoped>
  .apply-result{
    background: #fff;
    min-height: 100vh;
    align-items: unset;
    justify-content: center;
    .result-box{
      text-align: center;
      .result-icon{
        width: 151px;
        height: 151px;
        margin: 33px auto 42px auto;
        background-size: 457px 151px!important;
        &.result-0{
          background-position: 0 0!important;
        }
        &.result-1{
          background-position: -153px 0!important;
        }
        &.result-2{
          background-position: -306px 0!important;
        }
      }
      p{
        font-size: 20px;
        font-weight: bold;
      }
      .result-btn{
        background: #7427ff;
        text-align: center;
        color: #fff;
        height: 44px;
        line-height: 44px;
        border-radius: 100px;
        margin: 44px auto 0 auto;
        width: 245px;
      }
    }    
  }
</style>
